<template>
  <div style="width: 100%">
    <el-row style="margin-top: 20px">
      <span style="color: #fff"
        ><i class="el-icon-s-custom">业务请求方：</i> {{ username }}</span
      >
    </el-row>
    <!-- <el-row style="margin-top: 20px">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="margin-right: 20px"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>关联以太坊地址</span>
          </template>
          <el-menu-item
            v-for="(addr, index) in ethAddrList"
            :key="index"
            :index="index.toString()"
          >
            <el-tooltip effect="light" placement="top-start">
              <div slot="content">{{ addr }}</div>
              <span>
                {{ addr.slice(0, 6) + "…" + addr.slice(-7, -1) }}
              </span>
            </el-tooltip>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-row> -->
    <!-- <el-row style="margin-top: 20px">
      <el-button type="success" plain @click="addEthAddr"
        >添加关联地址</el-button
      >
    </el-row> -->
    <el-row style="margin-top: 20px">
      <el-button
        type="primary"
        plain
        style="padding-left: 34px; padding-right: 34px"
        @click="openRegister"
        >业务提交
      </el-button>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-button
        type="danger"
        plain
        @click="layout"
        style="padding-left: 34px; padding-right: 34px"
        >退出登录
      </el-button>
    </el-row>
    <el-dialog title="关联以太坊地址" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="addEthAddrList" placeholder="请输入地址"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAddrConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <register-resource :register="register" :ethAddr="ethAddrList" />
  </div>
</template>
<script>
import registerResource from "./component/service-submit.vue";
export default {
  components: { registerResource },
  name: "UserManage",
  data() {
    return {
      username: this.$route.query.username,
      ethAddrList: [],
      dialogVisible: false,
      addEthAddrList: "",
      register: {
        isShow: false,
      },
    };
  },
  created() {
    this.getAssociatedAddress();
  },
  methods: {
    addEthAddr() {
      this.dialogVisible = true;
    },
    addAddrConfirm() {
      this.GLOBAL.web3.eth.getAccounts().then((res) => {
        var tmp = this.GLOBAL.contract.methods
          .addAddress(this.$route.query.username, this.addEthAddrList)
          .send({ from: res[0] })
          .then((res) => {
            this.getAssociatedAddress();
          });
        console.log("999", tmp);
      });
      this.dialogVisible = false;
    },
    layout() {
      this.$router.push({
        path: "/login",
      });
    },
    getAssociatedAddress() {
      this.GLOBAL.web3.eth.getAccounts().then((res) => {
        var tmp = this.GLOBAL.contract.methods
          .findUser(this.$route.query.username)
          .call({ from: res[0] }) //这里call的from到底应该是谁？是当前metamask账户？
          .then((res) => {
            console.log("res", res);

            this.ethAddrList = [];
            this.ethAddrList = res._userAddress;
            this.register.ethAddrList = [];
          });
        console.log("777 ", tmp);
      });
    },
    openRegister() {
      this.register.isShow = true;
    },
  },
};
</script>

<style>
</style>
